<template>
<div class="main">
	<div class="header">
	   <div class="logo">
	   	<img src="../assets/images/logo.png">
	   </div>
	   <div class="schoolName" @click='goSchoolDetail'>{{successData.schoolName}}</div>
	</div>
  <div class="contain">
    <ul>
      <li>
        <span class="name-item">班级名称</span>
        <span class="result-item">{{successData.classCode}}</span>
      </li>
      <li>
        <span class="name-item">班级类型</span>
        <span class="result-item">{{successData.classType}}班</span>
      </li>
      <li>
        <span class="name-item">专业</span>
        <span class="result-item">{{successData.specialty}}</span>
      </li>
      <li>
        <span class="name-item">开班时间</span>
        <span class="result-item">{{successData.beginTime}}</span>
      </li>
      <li>
        <span class="name-item">学习天数</span>
        <span class="result-item">{{successData.duration}}天</span>
      </li>
      <li>
        <span class="name-item">招生人数</span>
        <span class="result-item">{{successData.planCount}}人</span>
      </li>
      <li>
        <span class="name-item">剩余名额</span>
        <span class="result-item">{{successData.laset}}人</span>
      </li>
    </ul>
  </div>
  <div class="j-submit" @click='submit'>确定报班</div>
  <!-- <div class="shawdom"></div> -->
   <div style="height: 100%">
    <dialog :show.sync="showNoScroll" class="dialog-demo" :scroll="false">
      <p class="dialog-title">温馨提示:<img src="../assets/images/icon_close.png" @click="showNoScroll=false"></p>
      <template v-if="showitem">
      <div class="img-box">
        <p>您选择的是{{successData.classCode}}</p>
        <p>开班时间是{{successData.beginTime}}</p>
        <p>您确定要报班吗？</p>
      </div>
      <div class="j-operate">
        <span class="sure-submit" @click="sureSubmit">确定</span>
        <span class="cancle" @click="showNoScroll=false">取消</span>
      </div>
      </template>
      <template v-if="!showitem">
      <div class="img-box" >
        <p>名额已满，不能报班!</p>
      </div>
      <div class="j-operate">
        <span class="sure-submit" @click="showNoScroll=false">确定</span>
        <span class="cancle" @click="showNoScroll=false">取消</span>
      </div>
      </template>
    </dialog>
  </div>
 
</div>
</template>
<script>
import Dialog from 'vux-components/dialog'
import XButton from 'vux-components/x-button'
import loading from 'vux-components/loading'
import toast from 'vux-components/toast'
import api from '../server.js'
import Client from '../client.js'
export default {
  name: 'classDetail',
  components: {
    Dialog,
    XButton,
    loading
  },
  ready(){
    this.loadPermissions();
  },
  data () {
    return {
      title: '班级',
      showNoScroll:false,
      showitem:true,
      successData:[],
    }
  },
  methods: {
   submit:function(){
    this.showNoScroll = true;
   },
   goSchoolDetail:function(){
    this.$router.go('/schoolDetail');
   },
   sureSubmit:function(){
     Client.doPost(Client.apiUrl.signUp,{
                classCode:this.successData.classCode,
                classType:this.successData.classType,
            },(data) => {
          // success callback
               console.log(data.data);
               if(data.data.code == 200){
                // this.showitem = true;
                 this.$router.go('/successDetail');
               }else if(data.data.code == -1){
                 this.showitem = false;
               }
            },(err) =>{
              // error callback
                  console.log(err)
            })

   },
   loadPermissions:function(){
    Client.doGet(Client.apiUrl.viewClass,(data) => {
          // success callback
          this.successData = data.data;
          console.log(this.successData);
        },(err) =>{
          // error callback
          console.log(err);
        })


    // let kk = api.kk();
    // this.$http.get(kk, {
    //             acid:1,
    //             wx_user_id:'yy',
    //         }).then((response) => {
    // // success callback
    // }, (response) => {
    // // error callback
    // });
   },
  },
}
</script>
<style lang="scss">
  div,ul,li,p,span,a{
    padding:0;
    margin:0 auto;
  }
  .notscoll{
    overflow: hidden;
  }
	.header{
    width: 100%;
    padding: 0 .5rem;
    background: #fff;
    height: auto;
    .logo{
    height: auto;
    padding-top: 1rem;
    padding-bottom: .9rem;
    img{
     height:5.45rem;
      width:5.7rem;
      margin: 0 auto;
      display: block;
  }
  }
  .schoolName{
    width:100%;
    height:2.875rem;
    line-height: 2.875rem;
    border-top: 1px solid #dddddd;
    color:#333333;
    font-size: .75rem;
    background:url(../assets/images/icon_arrow.png) no-repeat right center;
    background-size: .5rem;
  }
	}
	
	
  .contain{
    width:100%;
    height:auto;
    padding: 0 .5rem;
    background:#fff;
    margin-top:.5rem;
    ul{
    width:100%;
    height:auto;
    li{
    width:100%;
    height:2.85rem;
    line-height: 2.85rem;
    border-top:1px solid #dddddd;
    list-style: none;
    span{
    font-size: .75rem;
    display:inline-block;
  }
  .name-item{
    text-align: left;
    width: 33%;
    color: #333333;
  }
  .result-item{
    text-align: right;
    width: 63%;
    color: #999999;
  }
  }
  li:first-child{
    border-top:0px;
  }
  }
  }
 
  .j-submit{
    width:94.9%;
    height:2.5rem;
    line-height: 2.5rem;
    text-align: center;
    color: #fff;
    background:#438ac9;
    border-radius: .25rem;
    margin-top:1.15rem;
    margin-bottom: 2.3rem;
    font-size: .9rem;
  }
  .shawdom{
    width:100%;
    height:100%;
    background:#000;
    opacity: .5;
    position: absolute;
    top: 0;
    left:0;
    z-index: 99;
  }
  .dialog-title{
    font-size: .95rem;
    font-weight: bold;
    height:3rem;
    line-height: 3rem;
    position: relative;
  }
  .dialog-title img{
    width:.8rem;
    height:.75rem;
    position:absolute;
    top: 1rem;
    right:.6rem;
    color: #333333;
  }
  .weui_dialog{
    width:94.6%;
    color: #000;
  }
  .weui_dialog .img-box p{
    width:100%;
    height:1.15rem;
    line-height: 1.15rem;
    font-size: .75rem;
  }
  .j-operate{
    width:100%;
    padding:1.35rem 0;
  }
  .j-operate span{
    width:42%;
    height:2.375rem;
    line-height: 2.375rem;
    text-align: center;
    display: inline-block;
    color: #fff;
    border-radius: .25rem;
    font-size: .75rem;
  }
  .j-operate .sure-submit{
    background:#438ac9;
  }
  .j-operate .cancle{
    background:#a9a9a9;
  }
</style>